<html> 
 
<head> 
<title>012 | Particle Rain | J3D</title> 
<!-- Elephant model: http://www.3dmodelfree.com/models//27289-0.htm -->

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 

<link rel="stylesheet" href="common/common.css"/>
<script type="text/javascript" src="common/common.js"></script>

<!--
<script type="text/javascript" src="../lib/glMatrix.js"></script>
<script type="text/javascript" src="../lib/requestAnimationFrame.js"></script>
<script type="text/javascript" src="../src/J3D.js"></script>
<script type="text/javascript" src="../src/util/Color.js"></script>
<script type="text/javascript" src="../src/math/Vector2.js"></script>
<script type="text/javascript" src="../src/math/Vector3.js"></script>
<script type="text/javascript" src="../src/math/Matrix44.js"></script>
<script type="text/javascript" src="../src/engine/Engine.js"></script>
<script type="text/javascript" src="../src/engine/Camera.js"></script>
<script type="text/javascript" src="../src/engine/Light.js"></script>
<script type="text/javascript" src="../src/engine/Mesh.js"></script>
<script type="text/javascript" src="../src/engine/Scene.js"></script>
<script type="text/javascript" src="../src/engine/Loader.js"></script>
<script type="text/javascript" src="../src/engine/Filter.js"></script>
<script type="text/javascript" src="../src/engine/ShaderAtlas.js"></script>
<script type="text/javascript" src="../src/engine/EffectAtlas.js"></script>
<script type="text/javascript" src="../src/engine/Texture.js"></script>
<script type="text/javascript" src="../src/engine/Cubemap.js"></script>
<script type="text/javascript" src="../src/engine/Transform.js"></script>
<script type="text/javascript" src="../src/engine/Postprocess.js"></script>
<script type="text/javascript" src="../src/engine/FrameBuffer.js"></script>
<script type="text/javascript" src="../src/effects/EffectSource.js"></script>
<script type="text/javascript" src="../src/renderers/ShaderSource.js"></script>
<script type="text/javascript" src="../src/renderers/Phong.js"></script>
<script type="text/javascript" src="../src/renderers/Toon.js"></script>
<script type="text/javascript" src="../src/renderers/Depth.js"></script>
<script type="text/javascript" src="../src/renderers/Gouraud.js"></script>
<script type="text/javascript" src="../src/renderers/Normal2Color.js"></script>
<script type="text/javascript" src="../src/renderers/Reflective.js"></script>
<script type="text/javascript" src="../src/renderers/Glass.js"></script>
<script type="text/javascript" src="../src/renderers/Skybox.js"></script>
<script type="text/javascript" src="../src/renderers/Shader.js"></script>
<script type="text/javascript" src="../src/util/Time.js"></script>
<script type="text/javascript" src="../src/util/ShaderUtil.js"></script>
-->

<script type="text/javascript" src="../build/j3d.js"></script>

<script id="rain" type="x-shader">
	//#name Rain
	//#author bartekd
	
	//#include CommonFilterInclude
	
	//#vertex
	attribute vec4 aParticle;
	uniform sampler2D uTexture;	

	varying vec4 vParticle;
	varying float illum;

	void main(void) {	
		vec4 pt = aParticle;
		
		pt.y = pt.y - (uTime * (1.0 + pt.z) / 10.0);
		pt.y = mod(pt.y, 1.0);
		
		vec2 p = vec2(pt.x * 2.0 - 1.0, pt.y * 2.0 - 1.0);
		
		vec4 c = texture2D(uTexture, pt.xy);
		
		p.x += (0.05 + c.r * 0.95) * 0.02 * sin(pt.w * uTime * 3.0);
		p.y += c.r * 0.02;
		
		illum = c.r;
		
		gl_Position = vec4(p, 0.0, 1.0);
		gl_PointSize = 2.0;
		
		vParticle = pt;
	}
	
	//#fragment
	varying vec4 vParticle;
	varying float illum;

	void main(void) {
		float a = (0.2 + illum * 0.8) * sin(uTime * vParticle.w + vParticle.w);
		gl_FragColor = vec4(a,a,a,  1.0);
	}

</script>

<script>
	
	var engine, elephant, sun, post;
	var mx, my = 0;
	
	function init() {
		if(!checkWebGL()) return;
		
		engine = new J3D.Engine();
		
		engine.setClearColor(J3D.Color.black);
		
		elephant = new J3D.Transform();
		elephant.rotation = new v3(0, Math.PI, 0);
		
		J3D.Loader.loadJSON("models/elephant.js", function(j) {  elephant.geometry = new J3D.Mesh(j); } );		
		
		elephant.renderer = new J3D.BuiltinShaders.fetch("Phong");
		
		sun = new J3D.Transform();
		sun.light = new J3D.Light(J3D.DIRECT);
		sun.light.color = new J3D.Color(.9, .8, .7, 1);
		sun.light.direction = new v3(-1, 0, -1).norm();
		

		var camera = new J3D.Transform(); 
		camera.camera = new J3D.Camera();
		camera.position.z = 14;
		camera.position.y = -1.2;
		engine.camera = camera;
		
		post = new J3D.Postprocess(engine);
		post.drawMode = gl.POINTS;
		
		post.filter = new J3D.ShaderUtil.parseGLSL(document.getElementById("rain").firstChild.nodeValue);
		
		var cd = [];
		for(var i = 0; i < 50000; i++) {
			cd.push(Math.random(), Math.random(), Math.random() * Math.PI, Math.random() * Math.PI);
		}
		
		post.geometry = new J3D.Geometry();
		post.geometry.addArray("aParticle", new Float32Array(cd), 4);

		engine.scene.add(camera, elephant, sun);
		
		document.onmousemove = onMouseMove;
		
		draw();
	}
	
	function onMouseMove(e) {
		mx = ( e.clientX / window.innerWidth  ) * 2 - 1;
		my = ( e.clientY / window.innerHeight ) * 2 - 1;
	}
	
	function draw() {
		if(!mx) mx = 0;
		if(!my) my = 0;
		
		elephant.rotation.x = my;
		elephant.rotation.y += mx * 0.1;
		
		//elephant.rotation.y -= Math.PI * J3D.Time.deltaTime / 12000;
		
		post.render();
		
		requestAnimationFrame(draw);	
	}
	
</script>

</head> 

<body onload="init();">
	
	<script>
		setLabels("012. Particle Rain", "Silhouette of an elephant in a rain of particles.<br>(currently, doesn't work with ANGLE on Win/Chrome)");
	</script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24294554-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</body> 

</html> 












